<template>
  <div class="demo-content">
    <div class="card">
      <div class="card-img">
        <img src="@/assets/3.jpg" alt="" class="card-img-iu">
      </div>
      <div class="card-info">
        <!-- <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 0h24v24H0z" fill="none"></path>
        <path
          d="M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828zM20 15V5H4v14L14 9l6 6zm0 2.828l-6-6L6.828 19H20v-1.172zM8 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
          fill="currentColor"></path>
      </svg> -->
        <p class="text-title">Card title</p>
        <p class="text-body">Lorem Ipsum dolor sit amet</p>
        <button class="card-button">Read More</button>
      </div>
    </div>

  </div>

</template>

<script setup>

</script>

<style  scoped>
.demo-content {
  width: 100%;
  height: 100%;
  background-color: #212121;
}

.card {
  width: 190px;
  height: 254px;
  border-radius: 50px;
  padding: 30px;
  background: #f5f5f5;
  position: relative;
  display: flex;
  align-items: flex-end;
  transition: 0.4s ease-out;
  box-shadow: 0px 7px 20px rgba(43, 8, 37, 0.2);
}

.card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* background: rgba(238, 116, 116, 0.4); */
  z-index: 2;
  transition: 0.5s;

}

.card-info {
  position: relative;
  z-index: 3;
  color: #f5f5f5;
  opacity: 0;
  transform: translateY(20%);
  transition: 0.5s;
}

/*Text*/
.text-title {
  font-size: 1.5rem;
  font-weight: 500;
}

.text-body {
  letter-spacing: 1px;
  font-size: 0.9rem;
  margin: 5px 0 15px 0;
}

/*Button*/
.card-button {
  padding: 0.6rem;
  outline: none;
  border: none;
  border-radius: 4px;
  background: #ee9ca7;
  color: white;
  font-weight: bold;
  transition: 0.4s ease;
}

/*Image*/
.card-img {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50px;
  top: 0;
  left: 0;
  background: #ee9ca7;
  background: linear-gradient(to bottom, #e7aeae, #ee9ca7);
}

.card-img-iu {
  width: 100%;
  height: 100%;
  border-radius: 50px;
}

/*Hover*/
.card:hover {
  transform: translateY(5%);
}

.card:hover:before {
  opacity: 1;
}

.card:hover .card-info {
  opacity: 1;
  transform: translateY(0);
}

.card-button:hover {
  background: rgba(218, 77, 77, 0.4);
  color: #f5f5f5;
}
</style>